<template>
  <div class="callCenterInfos">
    <TitleName
      class="title mb-20px"
      icon="i-carbon-bookmark-filled"
      title="订单明细"
    ></TitleName>
    <el-table :data="tableList" border>
      <el-table-column
        :show-overflow-tooltip="true"
        label="订单编号"
        prop="contractOrderNumber"
        width="200"
      />
      <el-table-column
        :show-overflow-tooltip="true"
        label="物料名称"
        prop="productName"
      />

      <el-table-column label="订单日期" prop="receiptsDate" width="140" />
      <el-table-column label="总金额" prop="price" width="120">
        <template #default="scope">
          {{ scope.row.price ? scope.row.price : '-' }}
        </template>
      </el-table-column>
      <!--      <el-table-column label="发票状态" prop="invoiceStatus" width="110">-->
      <!--        <template #default="scope">-->
      <!--          <div>-->
      <!--            <el-tooltip-->
      <!--              :content="scope.row.invoiceMsg"-->
      <!--              :disabled="!scope.row.invoiceMsg"-->
      <!--              effect="dark"-->
      <!--              placement="top"-->
      <!--            >-->
      <!--              <dict-drop-->
      <!--                :options="order_invoice_status"-->
      <!--                :value="scope.row.invoiceStatus"-->
      <!--              />-->
      <!--            </el-tooltip>-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column label="状态" prop="status" width="140">
        <template #default="scope">
          <div>
            <dict-drop :options="order_status" :value="scope.row.status" />
            <span v-if="scope.row.approvalStatus" class="text-12px text-#999999"
              >({{ scope.row.approvalStatus }})</span
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="createName" width="110" />
      <el-table-column
        align="center"
        header-align="center"
        label="所属单位"
        prop="orgName"
      />
    </el-table>
    <pagination
      v-show="total > 0"
      v-model:limit="searchFrom.pageSize"
      v-model:page="searchFrom.pageNum"
      :total="total"
      @pagination="getList"
    />
    <TitleName
      class="mb-20px mt-20px"
      icon="i-carbon-bookmark-filled"
      title="旧ERP历史订单"
    ></TitleName>
    <el-table
      ref="multipleTableRef"
      :data="tablePastData"
      class="mt-2"
      style="width: 100%"
    >
      <!--      <el-table-column-->
      <!--        :selectable="selectable"-->
      <!--        align="center"-->
      <!--        header-align="center"-->
      <!--        type="selection"-->
      <!--        width="55"-->
      <!--      />-->
      <el-table-column
        align="center"
        header-align="center"
        label="订单编号"
        prop="cbillcode"
      >
      </el-table-column>

      <el-table-column
        align="center"
        header-align="center"
        label="物料名称"
        prop="cmatname"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="订单时间"
        prop="ddate"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="总金额"
        prop="itotal"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="数量"
        prop="iqty"
      >
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="状态"
        prop="status"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="创建人"
        prop="ccreatorname"
      />
      <el-table-column
        align="center"
        header-align="center"
        label="所属单位"
        prop="orgName"
      />
    </el-table>
    <pagination
      v-show="pastTotal > 0"
      v-model:limit="pastSearchFrom.pageSize"
      v-model:page="pastSearchFrom.pageNum"
      :total="pastTotal"
      @pagination="getPastList"
    />
  </div>
</template>

<script name="PRSorderList" setup>
import { getCurrentInstance } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()
import useUserStore from '@/store/modules/user'
import useCommonStore from '@/store/modules/common'
import { selectDictLabel } from '@/utils/ruoyi'
import { getOrderList } from '@/api/salesManage/contractManage'
import { erpOlderporder } from '@/api/salesManage/businessManage'
import { listSalesOrder } from '@/api/indentManage/indent'
const userStore = useUserStore()
const commonStore = useCommonStore()
const { order_business_type, order_invoice_status, order_status } =
  proxy.useDict('order_invoice_status', 'order_business_type', 'order_status')
// 接受父级传递的参数
const props = defineProps({
  paramData: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  }
})
const data = reactive({
  searchFrom: {
    pageSize: 10,
    pageNum: 1
  },
  total: 0,
  tableList: [],
  //旧erp 历史数据
  tablePastData: [],
  pastSearchFrom: {
    pageSize: 10,
    pageNum: 1
  },
  pastTotal: 0
})
const {
  searchFrom,
  total,
  tableList,
  tablePastData,
  pastSearchFrom,
  pastTotal
} = toRefs(data)
function getList() {
  listSalesOrder({
    customerId: props.paramData.customerId,
    pageSize: searchFrom.value.pageSize,
    pageNum: searchFrom.value.pageNum,
    from: 'biz_call_record'
  }).then(res => {
    total.value = res.total
    tableList.value = res.rows
  })
}
//旧ERP历史订单
function getPastList() {
  let params = { ...pastSearchFrom.value }
  console.log(props.paramData, 'props.paramData--')
  params.csccode = props.paramData.customerTaxcode
  params.ctaxcustname = props.paramData.customerName
  erpOlderporder(params).then(res => {
    tablePastData.value = res.rows
    pastTotal.value = res.total
  })
}
watch(
  () => props.paramData,
  val => {
    if (JSON.stringify(val) != '{}') {
      console.log('订单接收参数：', val)
      getList()
      getPastList()
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>

<style lang="scss" scoped>
.callCenterInfos {
  .callCenterInfos-form {
    border-bottom: 1px solid #ebeef5;
    ::v-deep .el-form-item__label {
      background-color: #f5f7fa;
      color: #606266;
    }
    ::v-deep .el-form-item {
      border: 1px solid #ebeef5;
      margin-bottom: 0px;
      border-bottom: none;
      //background: #f5f7fa;
    }
    ::v-deep .el-input__wrapper,
    ::v-deep .el-textarea__inner {
      border: none !important;
      box-shadow: none !important;
    }
    ::v-deep .el-form-item__content .el-radio-group {
      padding-left: 10px;
    }
    .styTextarea {
      ::v-deep .el-form-item__label {
        line-height: 80px;
        height: 80px;
      }
    }
    .stySelect {
      ::v-deep .el-select.el-select--default {
        border: 1px solid #ccc;
        height: 30px;
        overflow: hidden;
      }
    }
  }
}
</style>
